<template>
  <view class="game-recharge">
    <view class="items-wrapper">
      <view @click="showPayDialog(item)" class="recharge" :class="item['class']" v-for="(item, index) in props.prices" :key="index">
        <!-- <view class="price"> -->
          <text  class="price">￥{{ item['show_price'] }}</text>
        <!-- </view> -->
      </view>
    </view>

    <pay
        v-if="payBoxShow"
        :gameId="props.gameId"
        :gameType="props.gameType"
        :gameIndex="props.gameIndex"
        :image="props.image"
        :price="props.price"
        :title="props.title"
        :count="buyCount"
        :ifFull="props.ifFull"
        @close="closePayDialog"
        @success="onPaySuccess"
    />
  </view>

  <!-- gifts popup -->
  <van-dialog
    use-slot
    :show="giftsDialogVisible"
    :show-confirm-button="false"
    width="312"
  >
    <gifts-dialog-content :gifts="gifts" v-on:close="closeGiftsDialog" />
  </van-dialog>
</template>

<script setup lang="ts">
  import Pay from '@/wxcomponents/pay'
  import GiftsDialogContent from '@/wxcomponents/gifts-dialog-content'
  import {ref} from "vue";

  let props = defineProps([
    'title',
    'prices',
    'gameId',
    'gameType',
    'gameIndex',
    'image',
    'price',
    'ifFull',
  ])

  /**
   * prices
   *  price: 单价，单位是分
   *  show_price: 购买按钮显示的价格
   *  class: 显示的class
   */

  const emits = defineEmits(['success'])
  let payBoxShow = ref(false)
  let buyCount = ref(0)

  const gifts = ref([])

  const giftsDialogVisible = ref(false)

  function onPaySuccess(val) {
    // 显示奖品信息
    gifts.value = val
    giftsDialogVisible.value = true

    emits('success')
  }

  function closeGiftsDialog() {
    giftsDialogVisible.value = false
  }

  function showPayDialog(item) {
    payBoxShow.value = true

    buyCount.value = item['count']
  }

  function closePayDialog() {
    payBoxShow.value = false
  }
</script>

<style scoped lang="scss">
  .game-recharge {
    width: 100%;
    height: 160px;
  }

  .items-wrapper {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-image: url('/static/owo/game-recharge-bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 375/156;
  }
  .recharge {
    background-size: 100%;
    background-repeat: no-repeat;
    width: 208rpx;
	height: 94rpx;
    position: relative;
  }
  .recharge .price {
    font-weight: 400;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
	color: #CB7621;
	font-size: 20rpx;
  }
  .recharge.recharge-1 {
  	background-image: url('/static/owo/recharge-1.png');
  }
  
  .recharge.recharge-2 {
  	background-image: url('/static/owo/recharge-2.png');
  }
  
  .recharge.recharge-3 {
  	background-image: url('/static/owo/recharge-3.png');
  }
  
  .recharge.recharge-5 {
  	background-image: url('/static/owo/recharge-5.png');
  }
  
  .recharge.recharge-10 {
  	background-image: url('/static/owo/recharge-10.png');
  }
  .recharge.recharge-12 {
    background-image: url('https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/recharge-12.png');
  }
  .recharge.recharge-0 {
    background-image: url('https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/recharge-all.png');
  }
  .recharge.recharge-50 {
    background-image: url('https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/recharge-50.png');
  }
</style>
